<template>
  <div class="statistics-page">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="page-breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/statistics">统计分析中心</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>生死数据统计</a-breadcrumb-item>
      <a-breadcrumb-item>年龄分布分析</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面标题 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="ancient-title">年龄分布分析</div>
        <div class="header-subtitle">阴曹地府 · 寿命统计分析</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚊</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card average-stat">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">平均寿命</div>
              <div class="stat-value">{{ averageAge }}</div>
              <div class="stat-label">岁</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card median-stat">
            <div class="stat-icon">
              <LineChartOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">中位寿命</div>
              <div class="stat-value">{{ medianAge }}</div>
              <div class="stat-label">岁</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card elderly-stat">
            <div class="stat-icon">
              <UserOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">长寿者比例</div>
              <div class="stat-value">{{ elderlyPercentage }}%</div>
              <div class="stat-label">80岁以上</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card premature-stat">
            <div class="stat-icon">
              <ExclamationCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">早逝率</div>
              <div class="stat-value">{{ prematurePercentage }}%</div>
              <div class="stat-label">50岁以下</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要图表区域 -->
    <div class="main-content">
      <a-row :gutter="[32, 32]" class="content-grid">
        <!-- 年龄金字塔 -->
        <a-col :xs="24" :lg="12">
          <a-card title="年龄死亡金字塔" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="pyramidYear" style="width: 100px">
                <a-select-option value="2024">2024年</a-select-option>
                <a-select-option value="2023">2023年</a-select-option>
                <a-select-option value="2022">2022年</a-select-option>
              </a-select>
            </template>
            <div class="chart-container">
              <v-chart :option="agePyramidOption" style="height: 450px" />
            </div>
          </a-card>
        </a-col>

        <!-- 年龄组死亡分布 -->
        <a-col :xs="24" :lg="12">
          <a-card title="年龄组死亡分布" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="ageGroupDistributionOption" style="height: 450px" />
            </div>
          </a-card>
        </a-col>

        <!-- 平均寿命趋势 -->
        <a-col :xs="24" :lg="12">
          <a-card title="平均寿命趋势" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="trendPeriod" style="width: 120px">
                <a-select-option value="10">近10年</a-select-option>
                <a-select-option value="20">近20年</a-select-option>
                <a-select-option value="50">近50年</a-select-option>
              </a-select>
            </template>
            <div class="chart-container">
              <v-chart :option="lifespanTrendOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 性别年龄对比 -->
        <a-col :xs="24" :lg="12">
          <a-card title="性别年龄对比" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="genderAgeOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 地区年龄差异 -->
        <a-col :xs="24">
          <a-card title="地区年龄差异分析" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="regionAgeOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 年龄统计表格 -->
        <a-col :xs="24" :lg="16">
          <a-card title="详细年龄统计" :bordered="false" class="table-card">
            <a-table :columns="ageColumns" :data-source="ageTableData" :pagination="{ pageSize: 8 }" size="small" />
          </a-card>
        </a-col>

        <!-- 年龄分析报告 -->
        <a-col :xs="24" :lg="8">
          <a-card title="年龄分析报告" :bordered="false" class="report-card">
            <div class="report-content">
              <div class="report-section">
                <h4>主要发现</h4>
                <ul>
                  <li>平均寿命较去年增长1.2岁</li>
                  <li>80岁以上长寿者比例上升</li>
                  <li>中年群体死亡率下降明显</li>
                  <li>儿童死亡率持续改善</li>
                </ul>
              </div>

              <div class="report-section">
                <h4>趋势分析</h4>
                <ul>
                  <li>老龄化趋势加剧</li>
                  <li>医疗水平提升效果显著</li>
                  <li>健康意识增强</li>
                  <li>预期寿命稳步提升</li>
                </ul>
              </div>

              <div class="report-section">
                <h4>建议措施</h4>
                <ul>
                  <li>加强老年人护理</li>
                  <li>优化医疗资源配置</li>
                  <li>推广健康生活方式</li>
                  <li>完善养老保障体系</li>
                </ul>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ClockCircleOutlined, LineChartOutlined, UserOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'

// 注册 ECharts 组件
use([CanvasRenderer, BarChart, LineChart, PieChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])

// 响应式数据
const loading = ref(false)
const pyramidYear = ref('2024')
const trendPeriod = ref('20')

// 核心指标数据
const averageAge = ref('76.8')
const medianAge = ref('78.2')
const elderlyPercentage = ref('18.7')
const prematurePercentage = ref('12.4')

// 年龄金字塔图表
const agePyramidOption = computed(() => {
  const ageGroups = ['0-4', '5-9', '10-14', '15-19', '20-24', '25-29', '30-34', '35-39', '40-44', '45-49', '50-54', '55-59', '60-64', '65-69', '70-74', '75-79', '80-84', '85-89', '90+']
  const maleData = [-1200, -1100, -980, -1500, -2800, -3200, -3800, -4200, -5100, -6800, -8900, -12500, -15800, -18200, -22000, -25600, -28900, -24500, -15200]
  const femaleData = [1100, 1000, 920, 1400, 2600, 3000, 3600, 4000, 4800, 6400, 8400, 11800, 14900, 17100, 20800, 24200, 27300, 23200, 14400]

  return {
    title: {
      text: '年龄死亡金字塔',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' },
      formatter: function (params) {
        const maleValue = Math.abs(params[0].value)
        const femaleValue = params[1].value
        return `${params[0].axisValue}<br/>男性: ${maleValue}<br/>女性: ${femaleValue}`
      }
    },
    legend: {
      data: ['男性', '女性'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: {
        color: '#999',
        formatter: function (value) {
          return Math.abs(value)
        }
      },
      splitLine: { lineStyle: { color: '#333' } }
    },
    yAxis: {
      type: 'category',
      data: ageGroups,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    series: [
      {
        name: '男性',
        type: 'bar',
        stack: 'total',
        data: maleData,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#4facfe' },
              { offset: 1, color: '#00f2fe' }
            ]
          }
        }
      },
      {
        name: '女性',
        type: 'bar',
        stack: 'total',
        data: femaleData,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#ff9a9e' },
              { offset: 1, color: '#fecfef' }
            ]
          }
        }
      }
    ]
  }
})

// 年龄组分布饼图
const ageGroupDistributionOption = computed(() => {
  const data = [
    { value: 35680, name: '0-20岁', itemStyle: { color: '#5470c6' } },
    { value: 89420, name: '21-40岁', itemStyle: { color: '#91cc75' } },
    { value: 125680, name: '41-60岁', itemStyle: { color: '#fac858' } },
    { value: 168940, name: '61-80岁', itemStyle: { color: '#ee6666' } },
    { value: 95280, name: '80岁以上', itemStyle: { color: '#73c0de' } }
  ]

  return {
    title: {
      text: '年龄组分布',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' },
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'center',
      textStyle: { color: '#fff' }
    },
    series: [
      {
        name: '年龄分布',
        type: 'pie',
        radius: ['30%', '70%'],
        center: ['60%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'outside',
          color: '#fff',
          formatter: '{b}\n{d}%'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        data: data
      }
    ]
  }
})

// 平均寿命趋势图
const lifespanTrendOption = computed(() => {
  const years = []
  const avgLifespan = []
  const maleLifespan = []
  const femaleLifespan = []

  for (let i = 20; i >= 0; i--) {
    const year = 2024 - i
    years.push(year)

    // 模拟趋势数据
    const baseAge = 70 + i * 0.3 + Math.random() * 2
    avgLifespan.push(parseFloat(baseAge.toFixed(1)))
    maleLifespan.push(parseFloat((baseAge - 2.5).toFixed(1)))
    femaleLifespan.push(parseFloat((baseAge + 2.8).toFixed(1)))
  }

  return {
    title: {
      text: '平均寿命变化趋势',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['总体平均', '男性平均', '女性平均'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: years,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'value',
      name: '年龄 (岁)',
      min: 65,
      max: 85,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '总体平均',
        type: 'line',
        smooth: true,
        data: avgLifespan,
        lineStyle: { color: '#d4990a', width: 3 },
        areaStyle: { color: 'rgba(212, 153, 10, 0.3)' }
      },
      {
        name: '男性平均',
        type: 'line',
        smooth: true,
        data: maleLifespan,
        lineStyle: { color: '#4facfe', width: 2 }
      },
      {
        name: '女性平均',
        type: 'line',
        smooth: true,
        data: femaleLifespan,
        lineStyle: { color: '#ff9a9e', width: 2 }
      }
    ]
  }
})

// 性别年龄对比图
const genderAgeOption = computed(() => {
  const ageRanges = ['0-10', '11-20', '21-30', '31-40', '41-50', '51-60', '61-70', '71-80', '80+']
  const maleAvgAge = [5.2, 15.8, 25.4, 35.6, 45.2, 55.8, 65.4, 75.2, 85.6]
  const femaleAvgAge = [5.1, 15.6, 25.2, 35.4, 45.0, 55.6, 65.2, 75.0, 86.2]

  return {
    title: {
      text: '性别年龄分布对比',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['男性', '女性'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ageRanges,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'value',
      name: '平均年龄',
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '男性',
        type: 'bar',
        data: maleAvgAge,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#4facfe' },
              { offset: 1, color: '#00f2fe' }
            ]
          }
        }
      },
      {
        name: '女性',
        type: 'bar',
        data: femaleAvgAge,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#ff9a9e' },
              { offset: 1, color: '#fecfef' }
            ]
          }
        }
      }
    ]
  }
})

// 地区年龄差异图
const regionAgeOption = computed(() => {
  const regions = ['华北', '东北', '华东', '华中', '华南', '西北', '西南']
  const avgAge = [78.2, 76.8, 79.1, 77.5, 78.8, 75.2, 76.9]
  const maleAge = [75.8, 74.2, 76.7, 75.1, 76.4, 72.8, 74.5]
  const femaleAge = [80.6, 79.4, 81.5, 79.9, 81.2, 77.6, 79.3]

  return {
    title: {
      text: '各地区平均寿命对比',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['总体', '男性', '女性'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: regions,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'value',
      name: '平均寿命 (岁)',
      min: 70,
      max: 85,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '总体',
        type: 'line',
        data: avgAge,
        lineStyle: { color: '#d4990a', width: 3 },
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' }
          ]
        }
      },
      {
        name: '男性',
        type: 'line',
        data: maleAge,
        lineStyle: { color: '#4facfe', width: 2 }
      },
      {
        name: '女性',
        type: 'line',
        data: femaleAge,
        lineStyle: { color: '#ff9a9e', width: 2 }
      }
    ]
  }
})

// 表格数据
const ageColumns = [
  { title: '年龄段', dataIndex: 'ageRange', key: 'ageRange', width: 100 },
  { title: '死亡人数', dataIndex: 'count', key: 'count', width: 100, sorter: (a, b) => a.count - b.count },
  { title: '占比', dataIndex: 'percentage', key: 'percentage', width: 80 },
  { title: '男性', dataIndex: 'male', key: 'male', width: 80 },
  { title: '女性', dataIndex: 'female', key: 'female', width: 80 },
  { title: '平均年龄', dataIndex: 'avgAge', key: 'avgAge', width: 90 },
  { title: '同比变化', dataIndex: 'change', key: 'change', width: 100 }
]

const ageTableData = ref([
  { key: 1, ageRange: '0-10岁', count: 12580, percentage: '2.3%', male: 6890, female: 5690, avgAge: '5.2岁', change: '-3.2%' },
  { key: 2, ageRange: '11-20岁', count: 8940, percentage: '1.6%', male: 5240, female: 3700, avgAge: '15.8岁', change: '-2.1%' },
  { key: 3, ageRange: '21-30岁', count: 14260, percentage: '2.6%', male: 9180, female: 5080, avgAge: '25.4岁', change: '+1.8%' },
  { key: 4, ageRange: '31-40岁', count: 28450, percentage: '5.1%', male: 17680, female: 10770, avgAge: '35.6岁', change: '+2.4%' },
  { key: 5, ageRange: '41-50岁', count: 46710, percentage: '8.4%', male: 28920, female: 17790, avgAge: '45.2岁', change: '+1.2%' },
  { key: 6, ageRange: '51-60岁', count: 78590, percentage: '14.2%', male: 48360, female: 30230, avgAge: '55.8岁', change: '+0.8%' },
  { key: 7, ageRange: '61-70岁', count: 125480, percentage: '22.6%', male: 72840, female: 52640, avgAge: '65.4岁', change: '+1.5%' },
  { key: 8, ageRange: '71-80岁', count: 143460, percentage: '25.8%', male: 78920, female: 64540, avgAge: '75.2岁', change: '+2.1%' },
  { key: 9, ageRange: '80岁以上', count: 95280, percentage: '17.2%', male: 42690, female: 52590, avgAge: '85.6岁', change: '+3.8%' }
])

onMounted(() => {
  loading.value = false
})
</script>

<style scoped>
.statistics-page {
  padding: 24px;
  min-height: 100vh;
}

.page-breadcrumb {
  margin-bottom: 16px;
}

.page-breadcrumb :deep(.ant-breadcrumb-link) {
  color: #d4990a;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 32px;
}

.header-content {
  margin-bottom: 16px;
}

.ancient-title {
  font-size: 32px;
  font-weight: bold;
  color: #d4990a;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'STKaiti', 'KaiTi', serif;
  margin-bottom: 8px;
}

.header-subtitle {
  font-size: 16px;
  color: #8fa4b8;
  font-family: 'STKaiti', 'KaiTi', serif;
}

.header-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.decoration-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4990a, transparent);
}

.decoration-symbol {
  color: #d4990a;
  font-size: 20px;
}

.stats-section {
  margin-bottom: 32px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.stat-icon {
  font-size: 32px;
  opacity: 0.8;
}

.average-stat .stat-icon {
  color: #d4990a;
}
.median-stat .stat-icon {
  color: #74b9ff;
}
.elderly-stat .stat-icon {
  color: #00b894;
}
.premature-stat .stat-icon {
  color: #fd79a8;
}

.stat-content {
  text-align: left;
}

.stat-title {
  font-size: 14px;
  color: #b3c5d1;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 12px;
  color: #8fa4b8;
}

.main-content {
  margin-top: 32px;
}

.chart-card :deep(.ant-card-head),
.table-card :deep(.ant-card-head),
.report-card :deep(.ant-card-head) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.chart-card :deep(.ant-card-head-title),
.table-card :deep(.ant-card-head-title),
.report-card :deep(.ant-card-head-title) {
  color: #d4990a;
  font-weight: 600;
}

.chart-card :deep(.ant-card-body),
.table-card :deep(.ant-card-body),
.report-card :deep(.ant-card-body) {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 0 0 8px 8px;
}

.chart-container {
  width: 100%;
}

.report-content {
  color: #fff;
}

.report-section {
  margin-bottom: 24px;
}

.report-section h4 {
  color: #d4990a;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
}

.report-section ul {
  list-style: none;
  padding: 0;
}

.report-section li {
  padding: 6px 0;
  border-left: 3px solid #d4990a;
  padding-left: 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #b3c5d1;
  font-size: 14px;
}

:deep(.ant-table-thead > tr > th) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #d4990a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.ant-table-tbody > tr > td) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: rgba(255, 255, 255, 0.1) !important;
}
</style>
